<template>
    <div class="">

        <box :title="title">
            <!-- 日期选择 -->
            <template #title-right>
                <div class="flex cursor-pointer">
                    <div v-for="(item, index) in timeList" :key="index" class="text-[#ffffff] w-[26px] h-[26px]
                   " :class="selectTime == index ? getDataImg('selectTime') :getDataImg('defaultSelectTime') "
                        @click="changeTime(item, index)">
                        <div class="text-center leading-[26px]">
                            {{ isNullOrEmpty( item?.name ) }}
                        </div>

                    </div>
                </div>
            </template>
            <div class="p-[16px] h-full"><!-- :style="{ height: hightdata + 'px' }"-->
                <lineChart v-bind="$attrs" />
            </div>
        </box>
    </div>
</template>
<script setup>
import {isNullOrEmpty} from '@/utils/functions'
import box from '@/views/large-data-screen/component/box.vue'
import lineChart from '@/views/large-data-screen/component/echarts/line.vue'
const props = defineProps({
    hightdata: {
        type: Number,
        default: 200

    },
    title: {
        type: String,
        default: ""
    },
    timeList: {
        type: Array,
        default: () => []
    },
    selectTime: {
        type: Number,
        default: 0
    },
});
const emit = defineEmits(['changeList',])
const changeTime = (item, index) => {
    emit('changeList', item, index)
}
</script>
<style scoped lang="scss"></style>
